<template>
  <el-dialog
    class="tool-box-dialog"
    :visible.sync="showDialog"
    title="工具箱"
    width="1350px"
    append-to-body
    v-dialogDrag
    @open="handleDialogOpen"
    @closed="handleDialogClosed"
  >
    <div class="content">
      <div class="left-table">
        <div class="title">
          <span>主设备</span>
          <el-button style="float: right;" type="primary" size="mini" @click="handleBindSubEquipment">绑定</el-button>
        </div>
        <el-table
          v-loading="leftTableLoading"
          :data="mainEquiopmentList"
          :cell-style="{
            height: '45px'
          }"
          height="70vh"
          @row-click="handleLeftTableRowClick"
        >
          <el-table-column align="center" width="20">
            <template slot-scope="scope">
              <el-radio class="left-radio" v-model="currMainEquipment.equipmentId" :label="scope.row.equipmentId"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="仪器编号" prop="equipmentNumber" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪器名称" prop="equipmentName" align="center" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪器型号" prop="equipmentTypeNumber" align="center" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentTypeNumber }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right-table">
        <div class="title">
          <span>副设备({{ currMainEquipment.equipmentName }})</span>
        </div>
        <el-table
          v-loading="rightTableLoading"
          :data="subEquiopmentList"
          :cell-style="{
            height: '45px'
          }"
          height="70vh"
        >
          <el-table-column label="仪器编号" prop="equipmentNumber" align="center" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪器名称" prop="equipmentName" align="center" min-width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="仪器型号" prop="equipmentTypeNumber" align="center" width="170">
            <template slot-scope="scope">
              <span>{{ scope.row.equipmentTypeNumber }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="" align="center" width="60">
            <template slot-scope="scope">
              <el-button type="text" style="color: red;" @click="handleRightTableUnBind(scope.row)">解绑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="dialog-footer" slot="footer">
      <el-button @click="showDialog = false;">关 闭</el-button>
      <el-button type="primary" @click="showDialog = false;">确 定</el-button>
    </div>

    <BindSubEquipment
			:show.sync="showBindSubEquipmentDialog"
      :row="currMainEquipment"
      :bindEquipemntIds="subEquiopmentList.map(item => item.equipmentId)"
      @bind-success="handleBindSuccess"
		></BindSubEquipment>
  </el-dialog>
</template>

<script>
import BindSubEquipment from './BindSubEquipment.vue'
import { listingEffectiveEquipment, listingBindEquipment, toolboxBindEquipment } from '@/api/resourse/equipment'

export default {
  name: 'ToolBoxDialog',
  components: {
    BindSubEquipment
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showDialog: {
      get() {
        return this.show
      },
      set(value) {
        this.$emit('update:show', value)
      }
    }
  },
  data() {
    return {
      // 主设备列表
      leftTableLoading: false,
      mainEquiopmentList: [],

      // 副设备列表
      rightTableLoading: false,
      subEquiopmentList: [],

      // 当前操作的主设备
      currMainEquipment: {},
      showBindSubEquipmentDialog: false,
    }
  },
  methods: {
    // 打开弹框时
    handleDialogOpen() {
      this.leftTableLoading = true
      listingEffectiveEquipment().then(res => {
        this.leftTableLoading = false
        this.mainEquiopmentList = res.data || []
      }).catch(err => {
        this.leftTableLoading = false
      })
    },
    // 点击左侧表格行
    handleLeftTableRowClick(row) {
      this.currMainEquipment = row
      this.rightTableLoading = true
      listingBindEquipment(row.equipmentId, true).then(res => {
        this.rightTableLoading = false
        this.subEquiopmentList = res.data || []
      }).catch(err => {
        this.rightTableLoading = false
      })
    },
    // 点击绑定
    handleBindSubEquipment() {
      if (!this.currMainEquipment.equipmentId) {
        return this.$message.warning('请先选择主设备')
      }
      this.showBindSubEquipmentDialog = true
    },
    // 处理绑定成功
    handleBindSuccess() {
      this.handleLeftTableRowClick(this.currMainEquipment)
    },
    // 处理解绑
    handleRightTableUnBind(row) {
      this.$modal.confirm(`是否确认解绑该设备?`).then(() => {
        const data = {
          primaryEquipmentId: this.currMainEquipment.equipmentId,
          equipmentId: this.subEquiopmentList.filter(item => item.equipmentId != row.equipmentId).map(item => item.equipmentId)
        }
        toolboxBindEquipment(data).then(res => {
          this.$message.success('操作成功')
          this.handleBindSuccess()
        }).catch(err => {})
      })
    },
    // 关闭弹框时
    handleDialogClosed() {
      this.leftTableLoading = false
      this.mainEquiopmentList = []
      this.rightTableLoading = false
      this.subEquiopmentList = []
      this.currMainEquipment = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  $left-table-width: 49%;

  .left-table {
    width: $left-table-width;

    .title {
      margin-bottom: 10px;
      color: #333;
      font-size: 16px;
      font-weight: 600;
      text-align: left;
    }

    .left-radio {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    ::v-deep .left-radio .el-radio__label {
      display: none;
    }
  }

  .right-table {
    width: calc(100% - #{$left-table-width} - 10px);
    margin-left: 10px;

    .title {
      margin-bottom: 10px;
      color: #333;
      font-size: 16px;
      font-weight: 600;
      text-align: left;
    }
  }
}
</style>
<style lang="scss">
.tool-box-dialog .el-dialog__body {
  overflow-x: hidden;
}
</style>